<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.css">
		<link href="../../../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../../../css/style.css" rel="stylesheet" type="text/css">
		<style>
			html,
			body {
				background-color: #efeff4;
				font-size: 16px;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			
			#picture {
				position: fixed;
			}
			
			#sexTab {
				margin-bottom: 20px;
			}
			
			#sexTab span {
				display: block;
			}
			
			.mui-table-view {
				background: none!important;
			}
			
			.mui-table-view .mui-table-view-cell {
				background: #fff;
			}
			
			.mui-table-view-cell:after {
				display: none!important;
			}
			
			.marginbottom {
				margin-top: 20px;
			}
			
			.border {
				border-bottom: solid 1px #e3e3e3;
			}
			
			#headuser,
			#headchild {
				line-height: 40px;
				margin-right: -100px;
			}
			
			#headuser:after {
				right: 40px;
			}
			
			#headchild:after {
				right: 40px;
			}
		</style>
	</head>

	<body>
		<div id="reviseinfo" class="mui-content">
			<div class="">
				<div class="mui-scroll">
					<ul class="mui-table-view showContent  mui-table-view-chevron" style="margin-top: 0px;">
						<li class="mui-table-view-cell marginbottom">
							<a id="headuser" class="mui-navigate-right">头像
								<span class="mui-pull-right head">
									<img class="head-img mui-action-preview" id="head-user" :src="items.pic"/>  
								</span>
							</a>
						</li>
						<li class="mui-table-view-cell marginbottom border">
							<a class="mui-navigate-right"><span>姓名</span><i class="mui-pull-right update">{{items.name}}</i></a>
						</li>
						<li class="mui-table-view-cell border"> 
							<a class="mui-navigate-right"><span>联系电话</span><i class="mui-pull-right update">{{items.tel}}</i></a>
						</li>
					</ul>
					<ul v-if="items.status!=0" class="mui-table-view  mui-table-view-chevron border" style="margin-top: 0px;">
						<li class="mui-table-view-cell" id='showUserPicker'> 
							<a class="mui-navigate-right"><span>和孩子关系</span><i class="mui-pull-right update" id="relation">{{items.relationship}}</i></a>
						</li>
					</ul>
					<!--ul class="mui-table-view  mui-table-view-chevron" style="margin-top: 0px;">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" id="password"><span>修改密码</span><i class="mui-pull-right update"></i></a>
						</li>
					</ul-->
					<div v-if="items.status!=0"> 
						<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 20px;margin-bottom: 20px;">
							<li class="mui-table-view-cell marginbottom">
								<a id="headchild" class="mui-navigate-right">宝宝头像
									<span class="mui-pull-right head" v-for="child in items.child">
									<img class="head-img mui-action-preview" id="head-child" :src="child.child_avatar"/>  
								</span>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron showContent">
							<li class="mui-table-view-cell border" v-for="child in items.child">
								<a class="mui-navigate-right"><span>宝宝姓名</span><i class="mui-pull-right update">{{child.child_name}}</i></a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell border" id="stardate">
								<a v-for="child in items.child" class="mui-navigate-right"><span>生日</span><i class="mui-pull-right update" id="setDate">{{child.child_birthday}}</i></a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell border" id='' v-for="child in items.child">
								<a href="#sexTab" class="mui-navigate-right"><span>性别</span><i class="mui-pull-right update" id="sex">{{child.child_sex}}</i></a>
							</li>
						</ul>

						<ul class="mui-table-view" style="padding-bottom: 80px;" v-for="child in items.child">
							<li class="mui-table-view-cell border">
								<a>学校<span class="mui-pull-right update1">{{child.institution_name}}</span></a>
							</li>
							<li class="mui-table-view-cell">
								<a>班级<span class="mui-pull-right update1">{{child.class_name}}</span></a>
							</li>
						</ul>
					</div>

					<!--<ul class="mui-table-view">
						<li class="mui-table-view-cell" style="text-align: center;">
							<a>退出登录</a>
						</li>
					</ul>-->
				</div>
			</div>
		</div>
		<div id="sexTab" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span>男</span>
				</li>
				<li class="mui-table-view-cell">
					<span>女</span>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sexTab"><b>取消</b></a>
				</li>
			</ul>
		</div>
	</body>
	<script src="../../../js/mui.min.js "></script>
	<script src="../../../js/mui.view.js "></script>
	<script src="../../../js/vue.min.js"></script>
	<script src="../../../js/app.js"></script>
	<script src="../../../js/token.js"></script>
	<script src="../../../js/mui.picker.js"></script>
	<script src="../../../js/mui.picker.min.js"></script>
	<script src="../../../js/mui.poppicker.js"></script>
	<script src="../../../js/jquery-1.8.3.min.js"></script>

	<script>
		 //处理返回键
        var backButtonPress = 0;
        mui.back = function(event) {
            var ws = plus.webview.currentWebview()
            if (ws) {
                ws.close();
            } else {
                backButtonPress++;
                if (backButtonPress > 1) {
                    plus.runtime.quit();
                } else {
                    plus.nativeUI.toast('再按一次退出应用');
                }
                setTimeout(function() {
                    backButtonPress = 0;
                }, 1000);
                return false;
            }
        };
		(function($, doc) {
			var state = app.getState(); 
			memberToken = state.memberToken;
			childid = state.childid
			$.init();
			$.ready(function() {
				/**
				 * 获取对象属性的值
				 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
				 * @param {Object} obj 对象
				 * @param {String} param 属性名
				 */
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};
				//普通示例
				var userPicker = new $.PopPicker();
				userPicker.setData(['爸爸', '妈妈', '爷爷', '奶奶', '姥姥', '姥爷']);
				var showUserPickerButton = doc.getElementById('showUserPicker');
				var userResult = doc.getElementById('relation');
				showUserPickerButton.addEventListener('tap', function(event) {
					userPicker.show(function(items) {
						var stringrelation = JSON.stringify(items[0]);
						var reg = new RegExp('"', "g");
						stringrelation = stringrelation.replace(reg, "");
						userResult.innerText = stringrelation;
						mui.post(Apiurl+'index/member_info', {
							uid: uid,
							relationship: stringrelation,
							memberToken: memberToken,
							child_id:childid
						}, function(data) {
							if(data.status == 200) {
								plus.nativeUI.toast('修改成功', {
									verticalAlign: 'middle'
								});
								mui.fire(plus.webview.getWebviewById("pcenter"), 'refreshuserinfo', {
									relationship: stringrelation
								})
								mui.fire(plus.webview.getWebviewById("invite"), 'refreshinvite')
							}

						}, 'json');
						//返回 false 可以阻止选择框的关闭
						//return false;  
					});
				}, false);
				//-----------------------------------------
				//级联示例
				document.getElementById("stardate").addEventListener('tap', function() {
					var datePicker = new mui.DtPicker({
						type: 'date', //若只显示年月日，类型为date，
						beginDate: new Date(1800, 01, 01), //开始时间，即所显示的时间里，最早的年份日期
						endDate: new Date(), //不传参数，表示为当前时间
					});
					datePicker.show(function(selectItems) {
						//将选择的年月日显示到屏幕上
						document.getElementById('setDate').innerHTML = selectItems;
						mui.post(Apiurl+'index/member_info', {
							uid: uid,
							child_birthday: document.getElementById('setDate').innerHTML,
							memberToken: memberToken
						}, function(data) {
							if(data.status == 200) {
								reviseinfo.items.child.forEach(function(res) {
									res.year = data.year;
									res.mons = data.mons;
									res.days = data.days;
								})
								mui.fire(plus.webview.getWebviewById("pcenter"), 'refreshuserinfo', {
									years: data.year,
									mons: data.mons,
									days: data.days
								})
								plus.nativeUI.toast('修改成功', {
									verticalAlign: 'middle'
								});

							}
						}, 'json');

					});
				})
				mui('#sexTab').on('tap', 'span', function() {
					document.getElementById('sex').innerHTML = this.innerHTML;
					mui("#sexTab").popover('toggle'); //这是可以用来关闭底部弹窗的事件

					mui.post(Apiurl+'index/member_info', {
						uid: uid,
						child_sex: this.innerText,
						memberToken: memberToken
					}, function(data) {
						if(data.status == 200) {
							plus.nativeUI.toast('修改成功', {
								verticalAlign: 'middle'
							});
							mui.fire(plus.webview.getWebviewById("pcenter"), 'refreshuserinfo', {
								sex: document.getElementById('sex').innerHTML
							})
						}

					}, 'json');
				})

			});
		})(mui, document);
		mui.init();
		mui.plusReady(function() {
		
			var pcenter = plus.webview.getWebviewById("pcenter");
			pcenter.reload(true)
			state = app.getState();
			uid = state.userid;
			memberToken = state.memberToken;
			childid = state.childid
			mui.post(Apiurl+"index/member_info", {
				uid: uid,
				memberToken: memberToken,
				child_id:childid
			}, function(data) {
				//alert(JSON.stringify(data))
				reviseinfo.items = data;
			}, 'json')
		});
		var reviseinfo = new Vue({
			el: "#reviseinfo",
			data: {
				items: []
			}
		})
		mui('.showContent').on('tap', '.mui-table-view-cell', function() {
			//console.log($(this).find('span').html());
			//console.log($(this).find('i').html());
			//console.log(this.children[0].getElementsByTagName('span')[0].innerText);
			//console.log(this.children[0].getElementsByTagName('span')[0].innerText);
			var name = this.children[0].getElementsByTagName('span')[0].innerText
			var inputName = this.children[0].getElementsByTagName('i')[0].innerText
			var type = '';
			switch(name) {
				case '姓名':
					type = 1;
					break;
				/*case '联系电话':
					type = 2;
					break;*/
				case '宝宝姓名':
					type = 4;
					break;
				case '生日':
					type = 5;
					break;
				case '性别':
					type = 6;
					break;
			}
			if(name!='联系电话'){
				mui.openWindow({
				url: 'input.html',
				id: 'revise',
				extras: {
					type: type,
					name: name,
					inputName: inputName
				},
				styles: {
					"render": "always",
					"popGesture": "hide",
					"bounce": "vertical",
					"bounceBackground": "#000",
				}
			});
			}
			
		});
		//更换头像
		mui(".mui-table-view-cell").on("tap", "#headuser", function(e) {
			if(mui.os.plus) {
				var a = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "修改头像",
					cancel: "取消",
					buttons: a
				}, function(b) {
					switch(b.index) {
						case 0:
							break;
						case 1:
							getImage();
							break;
						case 2:
							galleryImg();
							break;
						default:
							break
					}
				})
			}

		});
		//修改密码
		mui(".mui-table-view-cell").on("tap", "#password", function(e) {
			mui.openWindow({
				url: 'password.html',
				id: 'password',

				styles: {
					"render": "always",
					"popGesture": "hide",
					"bounce": "vertical",
					"bounceBackground": "#000",
				}
			});
		})
		//更换孩子头像
		mui(".mui-table-view-cell").on("tap", "#headchild", function(e) {
			if(mui.os.plus) {
				var a = [{
					title: "拍照"
				}, {
					title: "从手机相册选择"
				}];
				plus.nativeUI.actionSheet({
					title: "修改头像",
					cancel: "取消",
					buttons: a
				}, function(b) {
					switch(b.index) {
						case 0:
							break;
						case 1:
							getChildImage();
							break;
						case 2:
							galleryChildImg();
							break;
						default:
							break
					}
				})
			}

		});

		function getImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var s = entry.toLocalURL();
					document.getElementById("head-user").src = s + "?version=" + new Date().getTime();
					uploadAvatar(s, uid);
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/headuser.jpg"
			})
		}

		function getChildImage() {
			var c = plus.camera.getCamera();
			c.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var s = entry.toLocalURL();
					document.getElementById("head-child").src = s + "?version=" + new Date().getTime();
					uploadAvatar(s, uid, childid);
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(s) {
				console.log("error" + s);
			}, {
				filename: "_doc/headchild.jpg"
			})
		}
		var file = [];

		function galleryImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
						root.getFile("headuser.jpg", {}, function(file) {
							//文件已存在
							file.remove(function() {
								console.log("file remove success");
								entry.copyTo(root, 'headuser.jpg', function(e) {
										var s = e.fullPath;
										//alert(s)
										document.getElementById("head-user").src = s + "?version=" + new Date().getTime();
										uploadAvatar(s, uid);
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							}, function() {
								console.log("delete image fail:" + e.message);
							});
						}, function() {
							//文件不存在
							entry.copyTo(root, 'headuser.jpg', function(e) {
									var s = e.fullPath;
									document.getElementById("head-user").src = s + "?version=" + new Date().getTime();
									uploadAvatar(s, uid);
								},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
						});
					}, function(e) {
						console.log("get _www folder fail");
					})
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};

		function galleryChildImg() {
			plus.gallery.pick(function(a) {
				plus.io.resolveLocalFileSystemURL(a, function(entry) {
					plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
						root.getFile("headchild.jpg", {}, function(file) {
							//文件已存在
							file.remove(function() {
								console.log("file remove success");
								entry.copyTo(root, 'headchild.jpg', function(e) {
										var s = e.fullPath;

										document.getElementById("head-child").src = s + "?version=" + new Date().getTime();
									
										uploadAvatar(s, uid, childid);
									},
									function(e) {
										console.log('copy image fail:' + e.message);
									});
							}, function() {
								console.log("delete image fail:" + e.message);
							});
						}, function() {
							//文件不存在
							entry.copyTo(root, 'headchild.jpg', function(e) {
									var s = e.fullPath;
									document.getElementById("head-child").src = s + "?version=" + new Date().getTime();
									uploadAvatar(s, uid);
								},
								function(e) {
									console.log('copy image fail:' + e.message);
								});
						});
					}, function(e) {
						console.log("get _www folder fail");
					})
				}, function(e) {
					console.log("读取拍照文件错误：" + e.message);
				});
			}, function(a) {}, {
				filter: "image"
			})
		};
		window.addEventListener('refreshuserinfo', function(event) {
			var backtype = event.detail.type;
			var modifyinfo = event.detail.modify
			if(backtype == 1) {
				reviseinfo.items.name = modifyinfo;
			} else if(backtype == 2) {
				reviseinfo.items.tel = modifyinfo;
			} else if(backtype == 4) {
				reviseinfo.items.child[0].child_name = modifyinfo;
			}
		})
		//切换孩子 
		window.addEventListener('changeChild', function(event) {
			childid = event.detail.changeChild;
			//alert(1)
			mui.post(Apiurl+"index/member_info", {
				uid: uid,
				memberToken: memberToken,
				child_id:childid
			}, function(data) {
				//alert(JSON.stringify(data))
				reviseinfo.items = data;
			}, 'json')
		});
		document.getElementById("head-user").addEventListener('tap', function(e) {
			e.stopPropagation();
		});
		document.getElementById("head-child").addEventListener('tap', function(e) {
			e.stopPropagation();
		});
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		document.getElementById('password').addEventListener('tap', function() {
			mui.openWindow({
				url: '/password.html',
				id: 'revise',
				styles: {
					"render": "always",
					"popGesture": "hide",
					"bounce": "vertical",
					"bounceBackground": "#000",
				}
			});
		})

		function uploadAvatar(path, uid , childid) {
			//alert(childid)
			var typepic = '';
			var str = path; //截取后4位
			str = str.substring(str.length - 5);
			if(str == 'r.jpg') {
				typepic = 'pic'
			} else if(str == 'd.jpg') {
				typepic = 'child_pic'
			}
			var name = path.substr(path.lastIndexOf('/') + 1);
			plus.zip.compressImage({
				src: path,
				dst: '_doc/' + name,
				overwrite: true,
				format: "jpg",
				width: "320px",
				height: "auto",
				quality: 30
			}, function(zip) {
				var task = plus.uploader.createUpload(Apiurl+"index/member_info", {
					method: "POST",
				}, function(t, status) {
					// 上传完成
					if(status == 200) {
						//reviseinfo.items = data;
						for(var i=0; i<state.code.length;i++){
							
							if(childid==state.code[i].child_id){ 
								state.code[i].child_avatar=JSON.parse(t.responseText).pic;
								localStorage.setItem("$state",JSON.stringify(state))
							}
							//if(childid == )
						}
						//localStorage.setItem("$state",JSON.stringify())
						var pcenter = plus.webview.getWebviewById("pcenter"); //根据页面ID获取到该页面对象
						pcenter.reload(true); //设置页面重新加载项(默认为false，改为true)
						mui.fire(plus.webview.getWebviewById("pcenter"), "refreshuserinfo", { 
							pic:1
						});
						//alert("Upload success: " + t.url);
					} else {
						//alert("Upload failed: " + status);
					}
				});
				task.addFile(zip.target, {
					key: typepic
				});
				task.addData("uid", uid.toString());
				if(childid){
					task.addData("child_id", childid.toString()); 
				}
				
				task.addData("memberToken", memberToken);
				//task.addEventListener( "statechanged", onStateChanged, false );
				task.start();
			}, function(zipe) {
				mui.toast('上传失败！')
			});
		}
			
	</script>

</html>